<template>
  <div class="container">
    <div class="user-container">
      <div class="user-form">
        <div class="form-title">
          <p>欢迎来到</p>
          <p>吃饱饱|订餐系统</p>
        </div>
        <div class="form-input">
          <el-form
            class="”from"
            ref="loginForm"
            :model="loginForm"
            :rules="rules"
          >
            <p>用户名</p>
            <login-item
              prop="username"
              type="name"
              v-model="loginForm.username"
              placeholder="请输入用户名"
            />
            <p>密码</p>
            <login-item
              prop="password"
              type="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
            />
            <el-button
              :loading="loading"
              type="success"
              style="height:48px;width:100%;margin-top:33px;"
              @click.native.prevent="handleLogin"
              >登录</el-button
            >
          </el-form>
        </div>
      </div>
      <div class="footer">
        <span>还没有账号？</span>
        <span @click="toRegister">立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import LoginItem from "@/components/LoginItem";
export default {
  components: {
    LoginItem
  },
  data() {
    const validateLogin = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      loginForm: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, trigger: "blur", validator: validateLogin }
        ],
        password: [
          { required: true, trigger: "blur", validator: validateLogin }
        ]
      },
      otherQuery: {}
    };
  },

  watch: {
    $route: {
      handler: function(route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          console.log("this.redirect", this.redirect);
          this.otherQuery = this.getOtherQuery(query);
          console.log("this.otherQuery", this.otherQuery);
        }
      },
      immediate: true
    }
  },

  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({
                path: "/",
                query: this.otherQuery
              });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },

    toRegister() {
      this.$router.push({
        path: "/register"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-family: Roboto;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  background-image: url("/tmpImg/loginbg.jpg");
  background-repeat: no-repeat;
  background-size: 50%;
}

.user-container {
  width: 50%;
  height: 100%;
  float: right;
  display: flex;
  justify-content: center;
}

.user-form {
  position: relative;
  top: 18%;
  width: 350px;
  height: 347px;
}

.form-title {
  position: relative;
  p {
    &:first-child {
      color: #2d3748;
      font-size: 16px;
      line-height: 19px;
    }
    &:last-child {
      color: #1a202c;
      font-weight: bold;
      font-size: 30px;
      line-height: 35px;
    }
  }
}

.form-input {
  position: relative;
  height: 267px;
  margin-top: 20px;

  p {
    color: #4a5568;
    font-size: 16px;
    line-height: 19px;
  }
}

.footer {
  position: absolute;
  bottom: 51px;
  span {
    font-size: 16px;
    line-height: 19px;
    &:first-child {
      color: #616161;
    }
    &:last-child {
      color: #2b6cb0;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
